<template>
  <div class="emoji-panel-container">
    <div class="emoji-title" v-if="emojiHistory.length !== 0">
      <span>最近使用</span>
      <span @click="deleteEmojiHistory">删除历史</span>
    </div>
    <div class="emoji-history-container">
      <img class="emoji-item" v-for="i in emojiHistory" :src="`https://cdn.sunofbeaches.com/emoji/${i}.png`" :key="i" @click="appendEmoji(i)" />
    </div>
    <div class="emoji-title">全部表情</div>
    <div class="emoji-all-container">
      <img class="emoji-item" v-for="i in 130" :src="`https://cdn.sunofbeaches.com/emoji/${i}.png`" :key="i" @click="appendEmoji(i)" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

let emojiHistory = ref([1, 4, 7, 99, 33, 44, 55, 66])
defineProps({
  className: {
    type: String,
    default: 'emoji-panel'
  }
})
const emits = defineEmits(['emojiClick'])

/* 将emoji图片插入到input-box里面的光标位置 */
const appendEmoji = (i) => {
  emits('emojiClick', i)
  /* 如果输入框没焦点 就要自动获取焦点 */

  // // const emoji = `<img class="emoji-item" src="https://cdn.sunofbeaches.com/emoji/${i}.png" />`
  // let targetUrl = `https://cdn.sunofbeaches.com/emoji/${i}.png`
  // /* 如果输入框没焦点 就要自动获取焦点 */
  // let inputBox = document.querySelector('.input-box')
  // if (document.activeElement !== inputBox) {
  //   inputBox.focus()
  // }
  // const selection = window.getSelection()
  // const range = selection.getRangeAt(0)
  // console.log(range, 'range')
  // range.deleteContents()
  // const node = document.createElement('img')
  // node.src = targetUrl
  // node.style.width = '16px'
  // node.style.height = '16px'
  // range.insertNode(node)
  // range.collapse()
  // selection.removeAllRanges()
  // selection.addRange(range)
  /* 保存历史 */
  saveEmojiHistory(i)
  /* 历史记录回显 */
  echoEmojiHistory()
}

/* 保存表情历史记录 */
const saveEmojiHistory = (emojiIndex) => {
  /* 先获取，再拼接 */
  const record = localStorage.getItem('emojiHistory')
  let targetSaveIndex = emojiIndex
  let count = 1
  if (record) {
    let splitArr = record.split(',')
    splitArr.forEach((item) => {
      if (item !== emojiIndex.toString()) {
        targetSaveIndex += `,${item}`
        count++
        //这里是判断是否超过了8个，如果超过了，就删除最后一个
        if (count > 8) {
          targetSaveIndex = targetSaveIndex.split(',')
          targetSaveIndex.pop()
        }
      }
    })
  }
  window.localStorage.setItem('emojiHistory', targetSaveIndex)
}
/* 删除表情历史记录 */
const deleteEmojiHistory = () => {
  window.localStorage.removeItem('emojiHistory')
  echoEmojiHistory()
}
/* 回显表情记录 */
const echoEmojiHistory = () => {
  const record = window.localStorage.getItem('emojiHistory')
  if (record) {
    emojiHistory.value = record.split(',')
  } else {
    emojiHistory.value = []
  }
}
onMounted(() => {
  /* 初始化 */
  echoEmojiHistory()
})
</script>

<style lang="scss" scoped>
.emoji-panel-container::-webkit-scrollbar {
  width: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
/* .emoji-panel-container::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
} */

/*定义滑块 内阴影+圆角*/
.emoji-panel-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.emoji-panel-container {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px;
  overflow-y: scroll;
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: greenyellow;
}
.emoji-history-container img,
.emoji-all-container img {
  width: 45px;
  height: 45px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.emoji-title {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span:last-child {
    color: #00a0e9;
    cursor: pointer;
    &:hover {
      color: rgba(0, 204, 255, 0.7);
    }
  }
}
.emoji-item:hover {
  transform: scale(1.3);
  transition: all 0.3s;
}
</style>
